<template>
  <div id="news">
    <el-card id="moment">
      <span style="color: #7f7f7f">消息中心</span>
    </el-card>
    <el-card id="btable">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="教材动态" name="first">教材动态</el-tab-pane>
        <el-tab-pane label="公告信息" name="second">公告信息</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
name: "news",
  data() {
    return {
      activeName: 'second'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>
#more {
  float: right;
}

#note {
  float: left;
  color: red;
}

#notice {
  margin: 0 20px;
  height: 50px;
}

#moment {
  margin: 10px 20px;
  display: flex;
}

#btable {
  margin: 10px 20px;
}

#news {
  margin: 0 300px;
}
</style>
